<template>
	<view>
		<view class="search">
			<view class="top">
				<view class="left">
					<image src="@/static/search.png"></image>
					<input type="text" v-model="form.name" :placeholder="$t('search.pla')">
				</view>
				<view class="button" @click="search">
					{{$t('search')}}
				</view>
			</view>
			<view class="record" v-if="searchList.length>0">
				<view class="item" v-for="(item, index) in searchList" :key="index" @click="itemSearch(item)">
					<view class="left">
						<image src="@/static/record.png"></image>
						{{item}}
					</view>
					<image src="@/static/del.png" @click="clearFn(index)"></image>
				</view>
			</view>
			<view class="clear" @click="clearFn('All')" v-if="searchList.length>0">
				{{$t('search.cle')}}
			</view>
		</view>
		<scroll-view class="scroll-view" scroll-x="true">
			<view class="cont">
				<view class="type" :class="item.id == form.cate_id?'select':''" v-for="(item, index) in videoType"
					:key="index" @click="typeFn(item)">
					{{item.name}}
				</view>
			</view>
		</scroll-view>
		<scroll-view class="scroll-video" scroll-y="true" @scrolltolower="lower">
			<view class="flex space" style="display:flex; flex-wrap:wrap; padding: 30upx 30upx 0px 30upx;">
				<block v-for="(value,key) in list" :key="key">
					<view class="box pb10 mb15" style="width:31%; border-radius:20rpx;" @click="detail(value.id,0)">
						<image class="integral-mall-goods" mode="aspectFill" :src="value.img"></image>
						<view class="mt8 plr10 ft14 ftw400 text-center text-over cl-main">{{value.name}}</view>
					</view>
				</block>
			</view>
			<uni-load-more :status="status" />
		</scroll-view>
	</view>
</template>

<script>
import util from '../../../utils/util'
	export default {
		data() {
			return {
				status: 'more',
				form: {
					name: '',
					cate_id: '',
					page: 1,
					page_size: 10,
				},
				list: [],
				total: 0,
				videoType: [],
				searchList: []
			}
		},
		onLoad(options) {
			if (options.id) {
				this.form.cate_id = options.id
			}
			this.videoCategory()
			this.searchVideo()
			util.setNavTitle()
			if (uni.getStorageSync('searchList')) {
				this.searchList = JSON.parse(uni.getStorageSync('searchList'))
			}
		},
		methods: {
			videoCategory() {
				uni.request({
					url: this.configs.webUrl + '/api/video/videoCategory',
					data: {
						token: uni.getStorageSync('token'),
						lang: uni.getStorageSync('language')
					},
					success: data => {
						console.log(data);
						this.videoType = data.data.data
					}
				})
			},
			searchVideo() {
				this.form.lang = uni.getStorageSync('language')
				this.status = 'loading'
				uni.request({
					url: this.configs.webUrl + '/api/video/searchVideo',
					data: this.form,
					success: res => {
						console.log(res);
						this.total = res.data.data.count
						this.list = this.list.concat(res.data.data.list)
						if (this.total > this.form.page * this.form.page_size) {
							this.status = 'more'
						} else {
							this.status = 'noMore'
						}
					}
				});
			},
			lower() {
				if (this.total > this.form.page * this.form.page_size) {
					this.form.page++
					this.searchVideo()
				}
			},
			typeFn(val) {
				this.form.cate_id = val.id
				this.search()
			},
			itemSearch(val) {
				this.form.page = 1
				this.form.name = val
				this.list = []
				this.searchVideo()
			},
			search() {
				this.list = []
				this.form.page = 1
				this.searchVideo()
				if (!this.form.name) return
				this.searchList.unshift(this.form.name)
				uni.setStorageSync('searchList', JSON.stringify(this.searchList))
			},
			clearFn(index) {
				if (index == 'All') {
					this.searchList = []
					uni.clearStorageSync('searchList')
				} else {
					this.searchList.splice(index, 1)
					uni.setStorageSync('searchList', JSON.stringify(this.searchList))
				}
			},
			detail(vid, mid) {
				var fxpid = 1
				if (uni.getStorageSync("userinfo")) {
					fxpid = uni.getStorageSync("userinfo").id
				}
				uni.navigateTo({
					url: '/pages/client/tuan/detail?vid=' + vid + '&mid=' + mid + '&fxpid=' + fxpid
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-view {
		width: 95%;
		margin: 0 auto;
		white-space: nowrap;

		.cont {
			display: flex;
		}

		.type {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #000000;
			margin-right: 20rpx;
		}

		.select {
			color: #F85A55;
		}
	}
	.scroll-video {
		height: calc(100vh - 16px - 63px - 40px);
	}
</style>
<style lang="scss" scoped>
	.search {
		background: #fff;
		border-radius: 8rpx;
		width: 95%;
		padding: 20rpx;
		margin: 20rpx auto;

		.top {
			height: 84rpx;
			border-radius: 60rpx;
			display: flex;
			justify-content: space-between;
			background: #F0F0F0;

			.left {
				display: flex;
				align-items: center;

				image {
					width: 24rpx;
					height: 24rpx;
					margin: 0 20rpx;
				}

				input {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
				}
			}

			.button {
				background: linear-gradient(90deg, #F75581 0%, #C860FF 100%);
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				border-radius: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 172rpx;
			}
		}

		.record {
			max-height: 250rpx;
			overflow: auto;
			margin-top: 20rpx;
			border-bottom: 1px solid #F0F0F0;

			.item {
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #7B7B7B;

					image {
						width: 26rpx;
						height: 26rpx;
						margin-right: 20rpx;
					}
				}

				image {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}

		.clear {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #7B7B7B;
			text-align: center;
		}
	}
</style>
<style>
	.integral-mall-goods {
		width: 100%;
		height: 280rpx;
		background: #F2F2F2;
		border-radius: 16upx;
	}

	.user-not-vip {
		width: 100%;
		height: 80rpx;
		background: #FDF6EC;
		border-radius: 40rpx;
		border: 2rpx solid #EFC381;
		text-align: center;
		line-height: 76rpx;
		font-size: 24rpx;
		color: #000000;
		font-weight: bold;
	}


	.tuan-product-l {
		width: 320rpx;
		height: 240rpx;
		border-radius: 16rpx;
		background: #F2F2F2;
	}

	.tuan-product-r {
		width: calc(100% - 320rpx);
	}

	.search-result {
		padding-top: 10px;
		padding-bottom: 20px;
		text-align: center;
	}

	.search-result-text {
		text-align: center;
		font-size: 14px;
		color: #666;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 0px;
	}

	.uni-mt-10 {
		margin-top: 10px;
	}
</style>